.card{
    height: 45vw;
}

.bigger {
    transform: scale(1.5,1.5);
}
.smaller{
    transform: scale(0.7,0.7);
}


.bigger_animated
{
    animation: bigger 0.3s;
    -moz-animation: bigger 0.3s;	/* Firefox */
    -webkit-animation: bigger 0.3s;	/* Safari 和 Chrome */
    -o-animation: bigger 0.3s;	/* Opera */
    animation-fill-mode:forwards;
}
@keyframes bigger
{
    0%   {transform: scale(0.7,0.7);}
    50%  {transform: scale(1.2,1.2);}
    100% {transform: scale(1.0,1.0);}
}

@-moz-keyframes bigger /* Firefox */
{
    0%   {transform: scale(0.7,0.7);}
    50%  {transform: scale(1.2,1.2);}
    100% {transform: scale(1.0,1.0);}
}

@-webkit-keyframes bigger /* Safari 和 Chrome */
{
    0%   {transform: scale(0.7,0.7);}
    50%  {transform: scale(1.2,1.2);}
    100% {transform: scale(1.0,1.0);}
}

@-o-keyframes bigger /* Opera */
{
    0%   {transform: scale(0.7,0.7);}
    50%  {transform: scale(1.2,1.2);}
    100% {transform: scale(1.0,1.0);}
}
.smaller_animated
{
    animation: smaller 0.3s;
    -moz-animation: smaller 0.3s;	/* Firefox */
    -webkit-animation: smaller 0.3s;	/* Safari 和 Chrome */
    -o-animation: smaller 0.3s;	/* Opera */
    animation-fill-mode:forwards;
}
@keyframes smaller
{
    0%   {transform: scale(1.0,1.0);}
    50%  {transform: scale(0.5,0.5);}
    100% {transform: scale(0.7,0.7);}
}

@-moz-keyframes smaller /* Firefox */
{
    0%   {transform: scale(1.0,1.0);}
    50%  {transform: scale(0.5,0.5);}
    100% {transform: scale(0.7,0.7);}
}

@-webkit-keyframes smaller /* Safari 和 Chrome */
{
    0%   {transform: scale(1.0,1.0);}
    50%  {transform: scale(0.5,0.5);}
    100% {transform: scale(0.7,0.7);}
}

@-o-keyframes smaller /* Opera */
{
    0%   {transform: scale(1.0,1.0);}
    50%  {transform: scale(0.5,0.5);}
    100% {transform: scale(0.7,0.7);}
}